Photoshop上に、沢山アイコンや写真を配置している画面、ありますよね。例えばアプリケーションの画面。ウェブサイトのデザインカンプ。構成図。

じゃあその画像をバラバラに書き出したいと思った時どうしていますか？一回一回保存するのはとてもめんどくさいヾ(｡>﹏<｡)ﾉ

そんな時は「生成」です。なんとレイヤー名を変えて、Photoshopで「上書き保存（command⌘+S）」をするだけで、勝手に指定した画像が生成、保存されていきます。とても簡単なので、やってみましょう！

やりかた

Photoshopを立ち上げる

画像をレイヤーに配置する

レイヤー名を変更

レイヤー名を変更する時に半角英数で「.png」と書きます。

生成にチェックを入れる

メニューから「ファイル」→「生成」→「画像アセット」にチェックを入れます。

そのまま名前をつけて保存する

そのまま名前をつけて保存します。

参考：既存のファイルに「上書き保存」をすると上手くいかない場合があります。その時は別名で保存するか、一旦レイヤーを閉じて開くなどをして変更を加え、再度「上書き保存」をしてください。

 

保存した場所にフォルダが生成

やることはこれだけ！「保存したファイル-assets」というフォルダが生成され、その中に先程「.png」を付けた画像が書き出されています！

書き出したいファイルはレイヤー名に「.png」を付けてどんどん生成してしまいましょう(´ε｀)

応用編① フォルダに付けてもOK

フォルダに「twin.png」、中のファイルに「star.png」「emblem.png」を用意しました。

star.pngはシェイプファイルです。

ばっちり書き出されました！中に入れておいたファイルも個別に生成されています。

これでレイヤー名の最後に「.png」を付けるだけで、勝手に画像が書き出されるようになりました！

応用編② マスクで変形して生成

ご紹介した方法では、透明部分がカットされた状態で生成されます。

好きな形で書き出したい！といったときにはチャンネルマスクを利用しましょう。これを利用すれば、余白をつける、生成される画像の大きさを統一する、といったことなども出来ます。

「選択範囲ツール」で自由に選択領域を作成し、フォルダに対してマスクを作成しました。

「選択範囲」の状態を保ったまま右下の線で囲まれたボタンを押せばOK。

今回のケースでは円形に選択範囲を取り、右下のボタンを押しました。するとフォルダに白黒の○が現れました。この形にマスクがされた、ということです。

この状態で書き出すと…

こんな感じに切り取られたまま書き出されました。

これで画像自体をいじらなくても、好きな形で生成することが可能です！

まとめ

画像アセットの書き出し方法については「Adobe Creative Cloud」のPhotoshopユーザーガイドでも触れられています。

PNG以外でも書き出せたり、細かい設定も出来ますので御覧になってみてください。

レイヤーからの画像アセットの生成（Photoshop ユーザーガイド）